<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制折线</title>
    <script src="jquery-3.6.0.js"></script>
    <script src="svg.min.js"></script>
    <link rel="stylesheet" href="svg.select.js/svg.select.min.css"/>
    <script src="svg.draw.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="svg-canvas"></div>
<script>
    SVG.extend(SVG.Element, {
        selectize2: function (selectGroup) {
            // selectGroup是用来存放选择框的g标签
            // 返回选择框的id，用于后续的处理
            // 1. 绘制选择框
            let bbox = this.bbox();
            let selRect = selectGroup.rect(bbox.w, bbox.h).move(bbox.x, bbox.y).addClass('svg_select_boundingRect')
            return selRect.node.id
        }
    });
</script>
<script>
    let drawing = new SVG("svg-canvas").size(2000, 2000);
    let selecting = false;
    let selectRect = [0, 0, 0, 0]
    let rect;
    let selectItemIDArr = []
    let selectedItem = {}  // key为选择对象的ID，value为选择框的ID

    let drawingGroup = drawing.group()  // 用于存在绘制的图形
    let selectGroup = drawing.group()  // 用于存选择框

    drawingGroup.svg('<polyline id="test" points="444.666679918766,397.33334517478943,507,397.33334517478943,507,462,603,462,603,560" stroke="#000000" fill="none" style="stroke-width: 2;"></polyline>')
    drawingGroup.svg('<polyline id="test2" points="746.6666889190674,278.0000082850456,825,278.0000082850456,825,346,876,346,876,478" stroke="#000000" fill="none" style="stroke-width: 2;"></polyline>')

    // 点选参考这个函数
    // drawing.on('mousemove', function (event) {
    //     if (document.elementFromPoint(event.pageX, event.pageY).nodeName === 'polyline') {
    //         console.log(document.elementsFromPoint(event.pageX, event.pageY))
    //     }
    // })

    drawing.on('click', function (event) {
        if (!selecting) {
            rect = drawing.rect();
            rect.draw(event)
                .attr("fill", "rgba(0,196,255,0.2)")
                .attr("stroke", "rgb(0,196,255)")
                .attr('stroke-width', 1)
            selectRect[0] = event.offsetX
            selectRect[1] = event.offsetY
            drawing.on('mousemove', boundingJudge)
        } else {
            // 第二次点击鼠标，结束框选的动作
            rect.draw('cancel');
            drawing.off('mousemove', boundingJudge)
            console.log(selectItemIDArr)
            drawingGroup.each(function (i, e) {
                if (selectItemIDArr.includes(this.node.id)) {
                    if (selectedItem.hasOwnProperty(this.node.id)) {
                        // 如果选中的已经包含了这个id，什么都不用做
                    } else {
                        // 将选择框的ID和选中对象关联起来
                        selectedItem[this.node.id] = this.selectize2(selectGroup)
                    }
                } else {
                    // 没有选中的对象，如果在selectedItem当中，
                    // 需要删除选择框，并从selectedItem中删掉
                    if (selectedItem.hasOwnProperty(this.node.id)) {
                        let selID = selectedItem[this.node.id];
                        SVG.get(selID).remove()
                        delete selectedItem[this.node.id]
                    }
                }
            })
        }
        selecting = !selecting
    });

    // let ele = SVG.get("test")
    // console.log(ele.bbox())

    // 获取所有svg元素的bbox
    // 将所有svg元素的bbox x1,y1,x2,y2 坐标保存起来，形式为
    // {id:[x1,y1,x2,y2],id:[],...}
    let bboxIDDict = {}
    drawingGroup.each(function (i, child) {
        bboxIDDict[this.node.id] = [this.bbox().x, this.bbox().y, this.bbox().x2, this.bbox().y2]
    })

    function boundingJudge(emm) {
        // 在鼠标移动的过程中判断是否选中某个对象
        if (selecting) {
            selectRect[2] = emm.offsetX
            selectRect[3] = emm.offsetY
            let xLittle = selectRect[0] > selectRect[2] ? selectRect[2] : selectRect[0]
            let xLarge = selectRect[0] < selectRect[2] ? selectRect[2] : selectRect[0]
            let yLittle = selectRect[1] > selectRect[3] ? selectRect[3] : selectRect[1]
            let yLarge = selectRect[1] < selectRect[3] ? selectRect[3] : selectRect[1]
            for (let id in bboxIDDict) {
                let x1 = bboxIDDict[id][0]
                let y1 = bboxIDDict[id][1]
                let x2 = bboxIDDict[id][2]
                let y2 = bboxIDDict[id][3]
                if (xLittle < x1 && yLittle < y1 && xLarge > x2 && yLarge > y2) {
                    if (!selectItemIDArr.includes(id)) {
                        selectItemIDArr.push(id)
                    }
                } else if (selectItemIDArr.includes(id)) {
                    let newArray = [];
                    for (let item of selectItemIDArr) {
                        if (item !== id) {
                            newArray.push(item)
                        }
                    }
                    selectItemIDArr = newArray
                }
            }
        }
    }

</script>
</body>
</html>